﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/font-awesome.min.css" rel="stylesheet" />
    <style>
        .hero-image {
            height: 400px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="jumbotron">
        <h1>Super Heroes</h1>
        <button class="btn btn-warning" onclick="superHeroes.clearAll()"><i class="fa fa-bomb"></i></button>
    </div>
    <div class="well-lg">
        <input class="input-sm" type="text" id="name" placeholder="Hero name?" />
        <input class="input-sm" type="text" id="power" placeholder="Powers" />
        <input class="input-sm" type="text" id="image" placeholder="Image" />
        </div>
        <div class="btn btn-success" onclick="superHeroes.addMember();">Add Hero</div>
        <div id="tableHolder" class="well">

        </div>

        <!--Modal Start-->
        <div class="modal fade" id="editModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="editTitle"></h4>
                    </div>
                    <div class="modal-body">
                        <i class="fa fa-coffee fa-2x"></i> <input type="text" id="editName" class="input-sm" /><br />
                        <i class="fa fa-instagram fa-2x"></i> <input type="text" id="editImage" class="input-sm" /><br />
                        <i class="fa fa-code fa-2x"></i> <input type="text" id="editPower" class="input-sm" /><br />
                        <i class="fa fa-stop fa-2x"></i> <select id="isVillain" class="input-sm">
                            <option value="true">Is a Villain</option>
                            <option value="false">Is a Hero</option>
                        </select><br />
                        <input type="hidden" id="editId" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" id="saveChangesBtn" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <script src="Scripts/jquery-1.9.0.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="_script.js"></script>

</body>
</html>
